<template>
  <div class="excel-container" ref="container" @scroll="handleScroll">
    <!-- 列头保持不变 -->
    
    <!-- 主体内容 -->
    <div class="content-wrapper" :style="{ height: totalRows * rowHeight + 'px' }">
      <div 
        class="row" 
        v-for="row in visibleRows" 
        :key="row"
        :style="{
          top: row * rowHeight + 'px',
          height: rowHeight + 'px'
        }"
      >
        <div class="row-header">{{ row + 1 }}</div>
        <div 
          v-for="(col, colIndex) in visibleCols"
          :key="col.key || colIndex"
          class="cell"
          :style="{
            width: col.width + 'px',
            gridColumn: getCellColumnSpan(row, colIndex),
            gridRow: getCellRowSpan(row, colIndex)
          }"
        >
          {{ getCellValue(row, colIndex) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'

// 添加行高定义（应放在组件顶部）
const rowHeight = ref(30) 

// 新增滚动相关变量
const container = ref(null)
const scrollTop = ref(0)
const scrollLeft = ref(0)

// 新增总列数计算
const totalCols = computed(() => Object.keys(colConfig).length)

// 初始化列配置（添加在组件setup区域）
const colConfig = reactive({})
const initColConfig = (numCols = 50) => {
  for (let i = 0; i < numCols; i++) {
    colConfig[i] = { width: 100 }
  }
}

// 在组件挂载时初始化
import { onMounted } from 'vue'
const cellData = reactive({}) // 存储单元格数据
const initCellData = (rows = 1000, cols = 50) => {
  for (let i = 0; i < rows; i++) {
    cellData[i] = {}
    for (let j = 0; j < cols; j++) {
      cellData[i][j] = { 
        value: `Cell ${i+1}-${j+1}`,
        colSpan: 1,
        rowSpan: 1
      }
    }
  }
}

// 在 onMounted 中调用
onMounted(() => {
  initColConfig()
  initCellData()  // 新增初始化
})

// 计算可见区域
const visibleRows = computed(() => {
  const start = Math.floor(scrollTop.value / rowHeight.value)
  const end = start + Math.ceil(container.value?.clientHeight / rowHeight.value) + 5
  return Array.from({ length: end - start }, (_, i) => start + i)
})

// 在visibleCols计算属性中添加列计算逻辑
const visibleCols = computed(() => {
  const containerWidth = container.value?.clientWidth || 0
  let accumulatedWidth = 0
  let startCol = 0
  
  while (startCol < totalCols.value && accumulatedWidth < scrollLeft.value) {
    accumulatedWidth += colConfig[startCol]?.width || 100
    startCol++
  }
  
  let endCol = startCol
  while (endCol < totalCols.value && accumulatedWidth < scrollLeft.value + containerWidth) {
    accumulatedWidth += colConfig[endCol]?.width || 100
    endCol++
  }
  
  return Array.from({ length: endCol - startCol + 1 }, (_, i) => startCol + i)
})

// 在handleScroll中添加防抖
import { useDebounceFn } from '@vueuse/core'

const handleScroll = useDebounceFn((e) => {
  scrollTop.value = e.target.scrollTop
  scrollLeft.value = e.target.scrollLeft
}, 16) // 匹配屏幕刷新率

// 使用Map缓存已渲染行数据
const rowCache = new Map()
const getRowData = (rowIndex) => {
  if (!rowCache.has(rowIndex)) {
    // 生成行数据的逻辑...
    rowCache.set(rowIndex, generatedData)
  }
  return rowCache.get(rowIndex)
}

// 在 rowHeight 定义后添加
const totalRows = computed(() => Object.keys(rowCache).length) 

// 在 getRowData 方法前添加
const getCellColumnSpan = (row, col) => {
  // 实现合并列逻辑，示例：
  return cellData[row]?.[col]?.colSpan || 1
}

const getCellRowSpan = (row, col) => {
  // 实现合并行逻辑，示例：
  return cellData[row]?.[col]?.rowSpan || 1
}

// 在 getCellColumnSpan 后添加
const getCellValue = (row, col) => {
  // 示例实现：
  return cellData[row]?.[col]?.value || ''
}
</script>

<style scoped>
/* 添加平滑滚动效果 */
.excel-container {
  scroll-behavior: smooth;
  overflow-anchor: none; /* 禁用浏览器自动滚动锚定 */
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.excel-container {
  position: relative;
  overflow: auto;
}

.content-wrapper {
  position: relative;
  will-change: transform;
}

.row {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  box-sizing: border-box;
}

/* 其他样式保持不变 */
</style>